<template>
	<view class="container">
		<view class="container__icon" :class="statusVisible ? 'container__icon-end' : 'container__icon-start'">
			<image :src="statusIcon" mode=""></image>
		</view>
		<view class="container__card">
			<view class="container__card--title">{{process.FlowName}}</view>
			<view class="container__card--company">{{process.ObsName}}</view>
			<view class="container__card--status" :style="{color: statusColor}">{{statusText}}</view>
		</view>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	
	export default {
		data() {
			return {
				place: _data.localData('obsname'),
				statusVisible: false,
				statusText: '',
				statusColor: '',
				statusIcon: '',
			}
		},
		props: {
			process: {
				type: Object,
				default: () => {}
			}
		},
		watch: {
			process: {
				deep: true,
				immediate: true,
				handler() {
					if(Object.keys(this.process).length) {
						this.$nextTick(function(){
							this.getFlowUnDoUserList();
							this.setPorcessStatus();
							setTimeout(() => {
								this.statusVisible = true;
							},300)
						})
						
					}
				}
			}
		},
		methods: {
			/**
			 * 获取待处理人员列表
			 */
			getFlowUnDoUserList() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getFlowUnDoUserList',
						apiparam: {
							insflowid: this.process.InsFlowId,
						},
						success(res) {
							if(!res.length) return
							let flowUnDoUserList = []
							res.forEach(item => {
								if(item.StepNo == res[0].StepNo) {
									flowUnDoUserList.push(item)
								}
							})
							if(that.process.FlowState == 0) {
								if(flowUnDoUserList.length > 1) {
									that.statusText = '等待' + res[0].UserName + '等' + flowUnDoUserList.length + '人审批'
								} else {
									that.statusText = '等待' + res[0].UserName + '审批'
								}
							}
							
						}
					})
				})
			},
			/**
			 * 设置流程状态
			 */
			setPorcessStatus() {
				switch(this.process.FlowState) {
					case '1':
						this.statusText = '审批通过';
						this.statusColor = '#19be6b';
						this.statusIcon = require('@/static/theme/default/home/process/yitongguo.png');
						break;
					case '-1':
						this.statusText = '审批拒绝';
						this.statusColor = '#fa3534';
						this.statusIcon = require('@/static/theme/default/home/process/yijujue.png');
						break;
					case '-3':
						this.statusText = '已撤回';
						this.statusColor = '#aaa';
						this.statusIcon = require('@/static/theme/default/home/process/yichexiao.png');
						break;
					case '-4':
						this.statusText = '已撤销';
						this.statusColor = '#aaa';
						this.statusIcon = require('@/static/theme/default/home/process/yichexiao.png');
						break;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		position: relative;
		
		&__icon {
			position: absolute;
			top: 130rpx;
			right: 40rpx;
			width: 160rpx;
			height: 160rpx;
			transition: all .4s ease;
			
			image {
				width: 100%;
				height: 100%;
			}
			
			&-start {
				transform: scale(2) translate(30rpx,100rpx);
			}
			
			&-end {
				transform: rotate(0) translate(0,0);
			}
		}
		
		&__card {
			background-color: #fff;
			padding: 20rpx;
			padding-left: 30rpx;
			margin-bottom: 20rpx;
			
			&--title {
				font-size: 40rpx;
				font-weight: bold;
				height: 100rpx;
				line-height: 100rpx;
			}
			
			&--company {
				color: #aaa;
			}
			
			&--status {
				font-size: 27rpx;
				color: orange;
			}
		}
	}
</style>
